<template>
  <div>
    <div class="search-input">
      <input type="text" placeholder="搜索歌曲、歌手、专辑" 
      v-model.trim="text"
      @input="searchInput"
      @keyup.enter="changComponent"
      />
      <i @click="$emit('chan-component','HotSearch');text=''" v-show="text"></i>
    </div>
  </div>
</template>

<script>
export default {
  props:['search'],
  data(){
    return {
      text:'',
      timer:null,
      history:[]
    }
  },
  watch:{
    search(n){
      console.log(111);
      this.text=n;
    }
  },
  methods:{
    searchInput(){
      clearTimeout(this.timer)
      console.log(this.text);
      if(!this.text){
        console.log(111);
        this.$emit('chan-component','HotSearch');
        return
      }
      
      setTimeout(() => {
        this.$emit('update-search',this.text);
      this.$emit('chan-component','SearchAdvice')
      }, 300);
    },
    changComponent(){
      this.history.push(this.text);
      localStorage.setItem("history",this.history);
      this.$emit('chan-component','SearchResult')
    }
  }
};
</script>

<style scoped lang="less">
input {
  border: 0;
  outline: none;
}
.search-input {
  padding: 15px 0;
  text-align: center;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  input {
    width: 92vw;
    background-color: #eef0f0;
    border-radius: 20px;
    padding: 7px;
    text-indent: 2em;
  }
  i{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto 0;
    width: 14px;
    height: 14px;
    background: url();
  }
  &::before {
    content: "";
    background: url();
    width: 13px;
    height: 13px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    margin: auto 0;
  }
}
</style>